import React, { useState,useEffect } from 'react';
import {Table,Button,Form,Input,Select,Space} from 'antd';
const { Option } = Select;
import type { TableProps } from 'antd';
import "./index.less"
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
export type ctableProp = {
    dataSource: TableProps<any>['dataSource'],
    columns: TableProps<any>['columns'],
    pagination?: TableProps<any>['pagination'],
    role?:string[],
    rowKey:string,
    searchable?:boolean
    search:(values:any)=>void
    add:()=>void,
    opBtns?:React.ReactNode[]

};

// interface DataType {
//     key: string;
//     ...ctableProp.dataType
// }



  
  
const ctable:React.FC<ctableProp> = (props) => {
    const [form] = Form.useForm();
    const [searchableList,setSearchableList] = useState([]);
    let searchabaleList:any = [];
    if(props.columns){
        props.columns.map((item:any)=>{
            if(item.searchable){
                searchabaleList.push(item)
            }
        })
        
    }
    useEffect(()=>{
        setSearchableList(searchabaleList)
    },[])

    const handleSearch = (values: any) => {
        console.log('Received values of form: ', values);
        props.search(values)
    };

    const handleAdd = ()=>{
        props.add()
    };
   
   
    const onReset = () => {
        setTimeout(()=>{
            form.resetFields();
            props.search(null)
        },50)
        

    };

    return (
        <>
            <div className='op-box' style={{display:(props.role&&props.role.length>0 || props.searchable)?'flex':'none'}}>
            <Form
                layout='inline'
                form={form}
                name="control-hooks"
                onFinish={handleSearch}
                style={{ maxWidth: 600 }}

                >
                    {
                        searchableList.map((item:any)=>{
                            return <Form.Item name={item.dataIndex} key={item.key} label={item.title}>
                                <Input />
                            </Form.Item>
                        })
                    }
                    <Space>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Space>
                </Form>
                <div>
                    <Button type="primary" style={{marginRight:10}} onClick={handleAdd}>新增</Button>
                    {props.opBtns}
                </div>
                
            </div>
            <Table 
                dataSource={props.dataSource} 
                columns={props.columns} 
                pagination={props.pagination}
                rowKey={props.rowKey}

            >
                
            </Table>
        </>
    )
}

export default ctable;